import {App, createVNode, render, VNode} from 'vue'
import item from './item.vue'
const directive = (app:App) => {
    app.directive('toolTip',{
        mounted(el,binding){
            const { value } = binding
            const gap = el.getAttribute('toolTip-gap')
            const position = el.getAttribute('toolTip-position')
            const backgroundColor = el.getAttribute('toolTip-backgroundColor')
            const showDelay = el.getAttribute('toolTip-showDelay')
            const textColor = el.getAttribute('toolTip-textColor')
            const node = createVNode(item,{el,gap,textColor,backgroundColor,position,showDelay,value})
            renderDom(node)
        }
    })
}

const renderDom = ( node:VNode) => {
    const content: any = document.createElement('div')
    render(node, content)
    document.body.appendChild(content.firstElementChild)
}

export default directive